<template>
  <view>
    <Wrap @changeRadio="changeRadio">
      <view class="login-box" key="other-login">
        <view class="login-input">
          <view class="login-list">
            <vInput
              v-model="dataForm.account"
              placeholder="请输入账号"
              :max="11"
              class="v-input"
            >
            </vInput>
          </view>
          <view class="login-list login-list__last">
            <vInput
              v-model="dataForm.password"
              placeholder="请输入密码"
              class="v-input"
            >
            </vInput>
          </view>
          <view class="btn-box">
            <button
              class="btn"
              :class="[disabled ? 'btn-info' : 'btn-primary']"
              @click="onLogin"
            >
              登录
            </button>
          </view>
		  <view class="login-list login-list-last">
		    <button @click="backIndex" class="btn ">
		      <text class="login-default__text">跳过登录</text>
		    </button>
		  </view>
        </view>
      </view>

      <Message ref="message"></Message>
    </Wrap>
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import Wrap from "./components/wrap";
import { mapState, mapMutations, mapActions } from "vuex";
import { getCode } from "@/common/js/base";
import { getSMS, login } from "@/common/api/login";
import { checkPhone } from "@/utils";
import { ERR_OK } from "@/common/config/index";
import vInput from "@/components/public/input/input";
import Message from "@/components/public/bobo-message/bobo-message";
export default {
  mixins: [viewModule],
  components: {
    Wrap,
    vInput,
    Message,
  },
  computed: {
    ...mapState(["code"]),
    disabled() {
      let form = this.dataForm;
      if (form.account.length < 4 || form.password.length < 4) {
        return true;
      }
      return false;
    },
  },
  data() {
    return {
	  isCheck: false,
      time: 0,
      dataForm: {
        // phone: "",
        // code: "",
        account: "",
        password: "",
      },
    };
  },
  onShow() {
    this.resetCode();
    this.timer = setInterval(() => this.resetCode(), 280 * 1000);
  },
  onHide() {
    clearInterval(this.timer);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    ...mapActions("User", ["getUserInfo", "phoneLogin"]),
    ...mapMutations("User", ["setToken"]),
    ...mapMutations(["setCode"]),
    resetCode() {
      getCode().then((code) => {
        this.setCode(code);
      });
    },
	changeRadio(e) {
	  console.log(e,'E???')
	  this.isCheck = e
	},
	backIndex() {
		uni.reLaunch({
		  url: "/pages/tabbar-pages/tabbar-pages?pages=1",
		});
	},
    onGetCode() {
      if (!this.time) {
        let { phone } = this.dataForm;
        if (phone.length !== 11 || !checkPhone(phone)) {
          return uni.showToast({
            title: "请输入正确的手机号!",
            icon: "none",
          });
        }
        uni.showLoading();
        getSMS({
          mobile: phone,
        })
          .then(({ data: res }) => {
            console.log(res, "??res");
            uni.hideLoading();
            if (res.code !== ERR_OK) {
              return this.message.error(res.message || "");
            }
            this.time = 59;
            this.timer = setInterval(() => {
              let time = this.time;
              this.time = time > 0 ? time - 1 : 0;
              if (time <= 0) {
                clearInterval(this.timer);
              }
            }, 1000);
          })
          .catch((err) => {
            uni.hideLoading();
          });
      }
    },
    onLogin() {
      let { dataForm } = this;
      let { code } = this;
	  if(this.isCheck) {
		uni.showLoading({
		  title: "登录中",
		  icon: "loading",
		});
		return this.phoneLogin({
		  ...dataForm,
		  mini_code: code,
		  code,
		})
		  .then(async (res) => {
		    console.log(res, "??res");
		    if (res.code !== this.$ERR_OK) {
		      uni.hideLoading();
		      return this.message.error(res.message || "登录失败");
		    }
		    let u = await this.getUserInfo();
		    uni.hideLoading();
		    console.log(u, "??u");
		    if (u && u.code === this.$ERR_OK) {
		      uni.reLaunch({
		        url: "/pages/tabbar-pages/tabbar-pages",
		      });
		    }
		  })
		  .catch((err) => {
		    uni.hideLoading();
		  });
		login({
		  mobile: dataForm.phone,
		  code: dataForm.code,
		  mini_code: code,
		})
		  .then(async ({ data: res }) => {
		    if (res.code !== ERR_OK) {
		      uni.hideLoading();
		      return this.message.error(res.message || "");
		    }
		    await this.setToken({
		      token: res.data.token,
		    });
		    await this.getUserInfo();
		    this.$Router.push("/pages/index/index");
		  })
		  .catch((err) => {
		    uni.hideLoading();
		  });  
	  } else {
		uni.showToast({
		   title: "请先阅读和勾选用户协议",
		   icon: 'none'
		});  
	  }
      
    },
  },
  watch: {},
};
</script>

<style lang="stylus" scoped>
@import '@/common/stylus/variable';

.login-list {
  padding: 0 62rpx;
  margin-bottom: 20rpx;

  &__last {
    margin-bottom: 0;
  }
}

.page {
  position: relative;
  /* #ifndef rn */
  min-height: 100vh;
  /* #endif */
  background-color: #fff; // 113476
  padding-bottom: 100px;
}

.btn {
  &-box {
    padding: 60rpx 62rpx 0;
  }

  &-login {
    border-radius: 10rpx;
  }

  &-disabled {
    opacity: 0.2;
  }

  &-ft-default {
    font-size: 28rpx;
    color: $color-desc;
  }
}
</style>